<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<form>
    <!----用一个label标签将上传文件输入框跟图片绑定一起，
    点击图片的时候就相当于点击了上传文件的按钮---->
    <label><img id="avatar-img" src="/statics/css/img/bb3.jpg" width="80px" height="80px">
        <div>头像<input id="avatar-input" hidden type="file"></div>

    </label>
    <input id="submit-btn" type="button" value="提交">
</form>
<script src="/statics/js/jquery-1.10.2.js"></script>
<script>
    // 上传文件按钮（label里的图片）点击事件
    $('#avatar-input').on('change', function () {
// 获取用户最后一次选择的图片
        var choose_file = $(this)[0].files[0];
// 创建一个新的FileReader对象，用来读取文件信息
        var reader = new FileReader();
// 读取用户上传的图片的路径
        reader.readAsDataURL(choose_file);
// 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径
        reader.onload = function () {
            $("#avatar-img").attr("src", reader.result)
        }
    });
</script>